<template>
	<div class="pro_view">
		<van-nav-bar title="交易记录" :fixed="true" />
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">

			<van-list :offset="0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

				<div v-if="ProductData.length != 0" class="pro_item" v-for="item,index in ProductData" :key="index">

					<div class="pi_top">
						<div style="margin-right: .13rem; width: 11px;height: 11px;border-radius: 50%;background-color: #3771FB;"></div>
						<span>订单号：{{item.ddbh}}</span>
					</div>

					<div class="pi_title">
						<p>交易金额</p>
						<p><span>￥</span>{{item.price}}</p>
					</div>

					<div class="pi_payType">
						<span>支付方式：{{item.typestr}}</span>
						<img :src="item.typestr == '支付宝' ? myApp.srcPath('zfb.png') : myApp.srcPath('wchat.png')" alt="">
					</div>

					<div class="pi_time">
						<p>生成时间：{{item.timestr}}</p>

						<!-- <p>完成时间：05-21 16:36</p> -->
					</div>

				</div>

				<div v-if="ProductData.length <= 0">
					<img style="width: 1.5rem;height: 1.2rem; display: block;margin: auto;margin-top: 1rem;margin-bottom: 100%;" :src="myApp.srcPath('zanwu.png')"
					 alt="">
				</div>
				
			</van-list>

			<!-- <div class="pro_item">
				
				<div class="pi_top">
					<div style="margin-right: .13rem; width: 11px;height: 11px;border-radius: 50%;background-color: #3771FB;"></div>
					<span>订单号：2020052100001</span>
				</div>
				
				<div class="pi_title">
					<p>派单名称</p>
					<p><span>￥</span>3031.2</p>
				</div>
				
				<div class="pi_payType">
					<span>支付方式：微信支付</span>
					<img :src="myApp.srcPath('wchat.png')" alt="">
				</div>
				
				<div class="pi_time">
					<p>生成时间：05-21 15:36</p>
					
					<p>完成时间：05-21 16:36</p>
				</div>
				
				<div style="display: flex;flex-direction:row-reverse;">
					
					<div class="pi_qr">确认</div>
				</div>
				
			</div>
			
			<div class="pro_item">
				
				<div class="pi_top">
					<div style="margin-right: .13rem; width: 11px;height: 11px;border-radius: 50%;background-color: #3771FB;"></div>
					<span>订单号：2020052100001</span>
				</div>
				
				<div class="pi_title">
					<p>派单名称</p>
					<p><span>￥</span>3031.2</p>
				</div>
				
				<div class="pi_payType">
					<span>支付方式：支付宝</span>
					<img :src="myApp.srcPath('zfb.png')" alt="">
				</div>
				
				<div class="pi_time">
					<p>生成时间：05-21 15:36</p>
					
					<p>完成时间：05-21 16:36</p>
				</div>
				
			</div>
			
			<div class="pro_item">
				
				<div class="pi_top">
					<div style="margin-right: .13rem; width: 11px;height: 11px;border-radius: 50%;background-color: #3771FB;"></div>
					<span>订单号：2020052100001</span>
				</div>
				
				<div class="pi_title">
					<p>派单名称</p>
					<p><span>￥</span>3031.2</p>
				</div>
				
				<div class="pi_payType">
					<span>支付方式：支付宝</span>
					<img :src="myApp.srcPath('zfb.png')" alt="">
				</div>
				
				<div class="pi_time">
					<p>生成时间：05-21 15:36</p>
					
					<p>完成时间：05-21 16:36</p>
				</div>
				
				<div style="display: flex;flex-direction:row-reverse;">
					
					<div class="pi_qr">确认</div>
				</div>
				
			</div> -->

		</van-pull-refresh>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		PullRefresh,
		NavBar,
		Toast,
		List
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(PullRefresh);
	Vue.use(List)

	import {
		Paidang
	} from '../serve/api.js'

	export default {
		created() {
			//如果有缓存数据则读取缓存数据   无 则调接口
			// if(this.$store.state.billData != null){
			
				// this.ProductData = this.$store.state.billData
			
			// }else{
			
				this.Paidang()
				
			// }
		},
		data() {
			return {
				count: 0,

				isLoading: false,

				ProductData: [],

				//上拉时 底部动画
				loading: true,

				//上拉请求后是否还有数据
				finished: true,

				//条数分页
				page: 1,
				
				//下拉拦截
				down:true
			};
		},
		methods: {
			
			//拉到底时触发事件
			onLoad() {
				
				if(!this.down){
					return;
				}
				
				// setTimeout( () => {
					
					this.page ++
					
					this.Paidang()
					
					this.down = false
				
				// },500)
					// this.count++;

			},

			Paidang() {

				let params = {

					type: 1,

					page: this.page

				}

				Paidang(params, (res) => {

					if (res.data.code == 1) {
						
						
						//                                                                ↓写入缓存
						
						this.page == 1 ? ( this.ProductData = res.data.data , this.$store.state.billData = res.data.data ) : this.ProductData = this.ProductData.concat(res.data.data ) 
								
						this.loading = false;		
						this.finished = false	
						
						//可以加载更多
						this.down = true
						
						if(this.page > 1){
					
							this.loading = false;
							
							this.finished = false
							
							// Toast('加载完成');
							
						}
												
						if(res.data.data.length < 10){
							
							this.loading = true;
							
							this.finished = true
							
							// Toast('所有数据都已加载完成');
							
						}
												
						// console.log(this.ProductData)
						
					}

				}, (error) => {

				})

			},

			onRefresh() {
				
				setTimeout(() => {
						
					this.loading = false;
					
					this.finished = false
					
					this.page = 1
					
					let refPromise = new Promise( (success,failure) => {
						
						let params = {
						
							type: 1,
						
							page: this.page
						
						}
					
						Paidang(params, (res) => {
						
							if (res.data.code == 1) {
								
								success(true)
								
								this.page == 1 ? ( this.ProductData = res.data.data , this.$store.state.billData = res.data.data ) : this.ProductData = this.ProductData.concat(res.data.data ) 
								
							}
						
						}, (error) => {
							
							failure(false)
						
						})
					
					})
					
					refPromise.then( (status) => {
						
						this.isLoading = false;
						
						Toast('刷新成功');
						
					}).catch( (status) => {
						
						this.isLoading = false;
						
						Toast('刷新失败');
						
					})
					
					// this.count++;
				}, 1000);
			},
		},
	};
</script>

<style scoped="">
	.pi_qr {
		width: 1.2rem;
		height: .5rem;
		background: rgba(55, 113, 251, 1);
		border-radius: .1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		margin-top: .3rem;
		font-size: .3rem;
	}

	.pi_time {
		color: #999;
		font-size: .24rem;
		margin-top: .26rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pi_payType img {
		width: .32rem;
		height: .32rem;
		margin-left: .14rem;
	}

	.pi_payType {
		margin-top: .18rem;
		color: #666666;
		display: flex;
		align-items: center;
		font-size: .28rem;
	}

	.pi_title p:nth-child(2) {
		color: #3771FB;
	}

	.pi_title span {
		color: #3771FB;
		font-size: .24rem;
	}

	.pi_title {
		margin-top: .21rem;
		font-size: .3rem;
		display: flex;
		justify-content: space-between;
	}

	.pi_top {
		color: #666666;
		font-size: .24rem;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #FBFBFB;
		padding-bottom: .17rem;
	}

	.pro_item {
		border: white;
		margin: auto;
		margin-top: .1rem;
		margin-bottom: .1rem;
		width: 7.03rem;
		background: rgba(255, 255, 255, 1);
		border-radius: 0.06rem;
		padding: .25rem;
		box-sizing: border-box;
	}

	.pro_view {
		position: absolute;
		top: 0;
		left: 0;
		overflow: auto;
		width: 100%;
		height: 100%;
		padding-top: 46px;
		box-sizing: border-box;
		font-size: .16rem;
		background: #FBFBFB;
		padding-bottom: 1rem;
	}
</style>
